<!-- 搜索框 -->
<template>
  <div class="chat-seach_box">
    <template v-if="type == 'chat'">
      <el-autocomplete
        prefix-icon="el-icon-search"
        :fetch-suggestions="fetchSuggestions"
        @select="handleSelect"
        v-model="searchValue"
        :popper-append-to-body="false"
        :trigger-on-focus="false"
        :placeholder="placeholder"
        size="mini"
        popper-class="poperSearchChat"
      >
        <template slot-scope="{ item }"
          ><div class="chat_item">
            <chatAvatar :content="getAvatar(item)"></chatAvatar>
            <div class="chat_content">
              <div class="innr_top">
                <span class="chat_name">{{ item.name }}</span>
                <span>{{ timeFormat(item.lastSendTime) }}</span>
              </div>
              <div class="innr_bottom">
                <span class="content">
                  <span v-if="item.atMe" style="color: red"> [有人@我] </span>
                  <span v-if="item.lastSenderName">
                    {{ item.lastSenderName }}:
                  </span>
                  <span v-if="item.lastMessageType === 3">[文件]</span>
                  <span
                    class="inner_content bottom_item"
                    v-else
                    v-html="
                      item.lastContent &&
                      item.lastContent.replace('[image]', minioEndpoint_mini)
                    "
                  ></span>
                </span>
                <span v-if="!item.isNotice" class="circle-new_num"
                  ><i class="el-icon-close-notification"></i>
                </span>
                <span
                  v-if="item.unreadCount > 0 && !item.isNotice"
                  class="red-circle"
                ></span>
                <span
                  v-if="item.unreadCount > 0 && item.isNotice"
                  class="unNum"
                  >{{ item.unreadCount }}</span
                >
              </div>
            </div>
          </div>
        </template>
      </el-autocomplete>
    </template>
    <template v-else>
      <el-select
        v-model="searchValue"
        filterable
        remote
        reserve-keyword
        :remote-method="fetchSuggestions"
        placeholder="搜索群名/姓名"
        popper-class="poperSelectSearch"
        @change="handleSelect"
      >
        <el-option-group
          v-for="group in options"
          :key="group.name"
          :label="group.name"
        >
          <el-option
            v-for="item in group.items"
            :key="item.id"
            :label="item.name"
            :value="item"
          >
            <div class="group_item">
              <chatAvatar
                :content="getContentAvatar(item, group.name == '群聊')"
              ></chatAvatar>
              <span class="chat_name">{{ item.name }}</span>
            </div>
          </el-option>
        </el-option-group>
      </el-select>
    </template>
  </div>
</template>

<script>
import { searchContactAndGroup, searchRecentChat } from "@/api/user"
import chatAvatar from "./avatar.vue"
import { mapState } from "vuex"
import { timeFormat } from "@/utils/chat"
export default {
  name: "seachPage",
  model: {
    prop: "modelValue",
    event: "change"
  },
  props: {
    type: {
      type: String,
      default: "chat"
    },
    placeholder: {
      type: String,
      default: "搜索"
    }
  },
  components: { chatAvatar },
  data() {
    return {
      timeFormat,
      searchValue: "",
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      options: []
    }
  },

  computed: {
    ...mapState({
      groupList: (state) => state.groupList
    })
  },

  methods: {
    async fetchSuggestions(queryString, cb) {
      let res = []
      if (this.type == "chat") {
        res = await searchRecentChat({ filter: { name: queryString } })
        const filterList = res.data.filter((item) => item.isShow)
        cb(filterList)
      } else {
        if (queryString) {
          const res = await searchContactAndGroup({ key: queryString })
          let result = []
          if (res.data) {
            for (const key in res.data) {
              if (Object.hasOwnProperty.call(res.data, key)) {
                const element = res.data[key]
                if (element && element.length > 0) {
                  result.push({
                    name: key === "groups" ? "群聊" : "联系人",
                    items: element
                  })
                }
              }
            }
            this.options = result
          }
        }
      }
    },
    getAvatar(chat) {
      if (chat.isGroup) {
        const curGroup = this.groupList.find(
          (item) => item.id === chat.receiverId
        )
        if (!curGroup) {
          console.log(chat)
        }
        return curGroup ? curGroup.avatarList : chat.name
      } else {
        return chat.avatar || chat.name
      }
    },
    getContentAvatar(chat, isGroup) {
      if (isGroup) {
        const curGroup = this.groupList.find((item) => item.id === chat.id)
        if (!curGroup) {
          console.log(chat)
        }
        return curGroup ? curGroup.avatarList : chat.name
      } else {
        return chat.avatar || chat.name
      }
    },
    handleSelect(item) {
      this.searchValue = ""
      this.$emit("select", item)
    }
  }
}
</script>
<style lang="less">
.group_item {
  display: flex;
  padding: 10px 0;
  .chat_name {
    padding-left: 10px;
    font-size: 14px;
    color: #333333;
    font-weight: 600;
  }
}

.chat-seach_box {
  .el-autocomplete-suggestion li {
    padding: 0 0 !important;
  }

  .el-input__inner {
    background: #edf0f6;
    border: none;
    font-family: PingFangSC-Regular;
    height: 32px;
    font-size: 14px;
  }

  .el-input--mini .el-input__icon {
    line-height: 32px !important;
  }
}
</style>
<style lang="less">
.poperSearchChat {
  width: 258px !important;
  .chat_item {
    display: flex;
    padding: 16px 12px;
    cursor: pointer;
    &:hover,
    &.active {
      background: rgba(225, 230, 240, 0.6);
    }
    .chat_content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-left: 10px;
    }
    .innr_top,
    .innr_bottom {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      line-height: 12px;
      color: #aaaaaa;
      .content {
        width: 170px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        .bottom_item {
          white-space: nowrap;
        }
        .inner_content {
          img {
            width: 18px !important;
            height: 18px !important;
          }
        }
      }
      .unNum {
        padding: 0 5px;
        height: 16px;
        font-size: 10px;
        line-height: 10px;
        background-image: linear-gradient(151deg, #ff928c 0%, #ff5040 96%);
        border-radius: 8px;
        text-align: center;
        line-height: 16px;
        color: #fff;
      }
      .circle-new_num {
        display: flex;
        align-items: center;
        font-size: 16px;
        line-height: 16px;
      }
      .red-circle {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-image: linear-gradient(151deg, #ff928c 0%, #ff5040 96%);
        border-radius: 8px;
      }
    }

    .chat_name {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
    }
  }
}

.poperSelectSearch {
  .el-select-group .el-select-dropdown__item {
    height: 60px !important;
  }
}
</style>
